<template>
  <div class="main">
    <a-alert v-if="isLoginError" type="error" showIcon style="margin-bottom: 24px;" :message="loginCallBack"/>
    <a-tabs :tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }">
      <a-tab-pane key="1" tab="登录">
        <a-input @keydown.enter="login" v-model="username" size="large" placeholder="请输入用户名">
          <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
        </a-input>
        <br><br>
        <a-input-password @keydown.enter="login" v-model="password" size="large" placeholder="请输入密码">
          <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
        </a-input-password>
        <br><br>
        <div id="auth-code">
          <a-input @keydown.enter="login" placeholder="请输入验证码" size="large" v-model="authCode">
          </a-input>
          <img :src="pic" style="cursor: pointer" alt="图片验证码" @click="getAuthCode">
        </div>
      </a-tab-pane>
    </a-tabs>
    <br><br>
    <a-button
        size="large"
        type="primary"
        @click="login"
        class="login-button"
        :loading="state.loginBtn"
        :disabled="state.loginBtn"
    >登录
    </a-button>
  </div>
</template>

<script>

import login from "@/api/users/login"
import {timeFix} from "@/utils/utils"
import authCode from "@/api/users/authCode";

export default {
  mounted() {
    this.getAuthCode();
  },
  data() {
    return {
      username: "",
      password: "",
      isLoginError: false,
      loginCallBack: "",
      codeId: "",
      pic: "",
      authCode: "",
      state: {
        loginBtn: false
      }
    }
  },
  methods: {
    enter(e) {
      if (e.key === "Enter") {
        this.login();
      }
    },
    login() {
      let self = this
      //  判断用户名或密码
      if (!self.username || !self.password) {
        this.$message.error("用户名或密码为空");
        return
      }
      //  判断验证码
      if (!self.authCode) {
        this.$message.error("请输入验证码");
        return
      }
      self.state.loginBtn = true
      //  发起登陆请求
      login({
        account: self.username,
        password: self.password,
        codeId: self.codeId,
        authCode: self.authCode
      }).then(res => {
        self.state.loginBtn = false;
        if (res.status) {
          self.isLoginError = false;
          self.loginSuccess(res.msg, res.identity)
        } else {
          self.loginCallBack = res.msg;
          self.isLoginError = true;
        }
      })
    },
    loginSuccess(res, identity) {
      // 登录成功处理逻辑
      localStorage.setItem("Authorization", res);
      // 根据identity显示不同的界面
      let toName = "";
      // identity可能为字符串，此处将identity转为num
      identity -= 0;
      switch (identity) {
        case 0:
          toName = "student";
          break;
        case 100:
          toName = "teacher";
          break;
        case 500:
          toName = "schoolAdmin";    // 学院教务
          break;
        default:
          toName = "student";
      }
      this.$router.push({name: toName})
      setTimeout(() => {
        this.$notification.success({
          message: '欢迎',
          description: `${timeFix()}，欢迎回来`
        })
      }, 1000)
      this.isLoginError = false
    },
    getAuthCode() {
      // 获取验证码图片
      let self = this;
      authCode().then(res => {
        if (res.status) {
          self.codeId = res.data.codeId;
          self.pic = "data:image/png;base64," + res.data.pic;
        } else {
          this.$message.error(res.msg);
        }
      });
    }
  }
}
</script>

<style scoped>
.login-button {
  padding: 0 15px;
  font-size: 16px;
  height: 40px;
  width: 100%;
}

#auth-code {
  display: flex;
}
</style>